import { history } from 'alita';
import { ErrorBlock } from 'antd-mobile';
import style from './InfoCard.less';
import { RightOutline } from 'antd-mobile-icons';

type PropsType = {
  title: string;
  list: {
    originId: number;
    title: string;
    url: string;
    types: string[];
  }[];
};

export default (props: PropsType) => {
  function navigate(url: string) {
    history.push(url);
  }
  return (
    <>
      <div className={style.wrap}>
        <div className={style.header}>
          <div className={style.title}>
            <div className={style.line}></div>
            {props.title}
          </div>
          <div className={style.more}>更多<RightOutline /></div>
        </div>
        <div className={style.content}>
          {props.list.length > 0 ? (
            props.list.slice(0, 3).map((item, index) => {
              const { title, url, types } = item;
              const shortUrl = url.substring(url.lastIndexOf('#') + 1);
              return (
                <div
                  className={style.item}
                  key={index}
                  onClick={() => navigate(shortUrl)}
                >
                  {index + 1}:{title}
                </div>
              );
            })
          ) : (
            <ErrorBlock
              style={{ paddingBottom: 10 }}
              description="暂无数据"
              title=""
              status="empty"
            />
          )}
        </div>
      </div>
    </>
  );
};
